<!--
 * @Author: Lzx
 * @Date: 2022-04-21 21:33:23
 * @LastEditors: Lzx
 * @LastEditTime: 2022-04-23 14:39:40
 * @FilePath: /web-vue/src/pages/Scenery/detail.vue
 * @Description: 景点详情页
-->
<template>
  <div>
    <el-page-header @back="() => $router.push('/Scenery')" content="景点详情">
    </el-page-header>
    <el-row class="data-table row-panel row-panel-first">
      <el-col>
        <el-card>
          <el-col>
            <template v-for="(o, index) in $store.state.DICT.sceneryTypeSelect">
              <el-tag
                v-if="o.code === obj.sceneryType"
                :key="index"
                :type="o.theme"
              >
                {{ o.name }}
              </el-tag>
            </template>
          </el-col>
          <el-col>
            <el-link type="success" :underline="false">{{
              obj.announceTitle
            }}</el-link>
          </el-col>
          <!-- 标题 -->
          <el-col>
            <h1 class="title">{{ obj.name }}</h1>
          </el-col>
          <!-- 详情内容 -->
          <div v-html="obj.detailArticle"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {},
    };
  },

  // 组件活跃时执行
  activated() {
    // 获取路由传递的参数
    this.obj = this.$route.params.obj;
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";

.title {
  text-align: center;
  font-size: 30px;
}
</style>
